<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 4.0.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">
  <link rel="alternate" href="/atom.xml" title="刘攀的个人专栏" type="application/atom+xml">

<link rel="stylesheet" href="/css/main.css">

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">


<script id="hexo-configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    hostname: new URL('http://liupan.run').hostname,
    root: '/',
    scheme: 'Pisces',
    version: '7.5.0',
    exturl: false,
    sidebar: {"position":"right","Pisces | Gemini":240,"display":"post","offset":12,"onmobile":false},
    copycode: {"enable":false,"show_result":false,"style":null},
    back2top: {"enable":true,"sidebar":false,"scrollpercent":false},
    bookmark: {"enable":false,"color":"#222","save":"auto"},
    fancybox: false,
    mediumzoom: false,
    lazyload: false,
    pangu: false,
    algolia: {
      appID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    },
    localsearch: {"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},
    path: 'search.xml',
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    sidebarPadding: 40
  };
</script>

  <meta name="description" content="css常用形状">
<meta name="keywords" content="css">
<meta property="og:type" content="article">
<meta property="og:title" content="019-CSS中常用形状">
<meta property="og:url" content="http:&#x2F;&#x2F;liupan.run&#x2F;2020&#x2F;01&#x2F;03&#x2F;019-CSS%E4%B8%AD%E5%B8%B8%E7%94%A8%E5%BD%A2%E7%8A%B6&#x2F;index.html">
<meta property="og:site_name" content="刘攀的个人专栏">
<meta property="og:description" content="css常用形状">
<meta property="og:locale" content="zh-CN">
<meta property="og:updated_time" content="2020-01-03T11:56:15.503Z">
<meta name="twitter:card" content="summary">

<link rel="canonical" href="http://liupan.run/2020/01/03/019-CSS%E4%B8%AD%E5%B8%B8%E7%94%A8%E5%BD%A2%E7%8A%B6/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome: false,
    isPost: true,
    isPage: false,
    isArchive: false
  };
</script>

  <title>019-CSS中常用形状 | 刘攀的个人专栏</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-meta">

    <div>
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">刘攀的个人专栏</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
        <p class="site-subtitle">面朝大海,春暖花开</p>
  </div>

  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>
</div>


<nav class="site-nav">
  
  <ul id="menu" class="menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="fa fa-fw fa-home"></i>首页</a>

  </li>
        <li class="menu-item menu-item-about">

    <a href="/about/" rel="section"><i class="fa fa-fw fa-user"></i>关于</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/tags/" rel="section"><i class="fa fa-fw fa-tags"></i>标签<span class="badge">28</span></a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/categories/" rel="section"><i class="fa fa-fw fa-th"></i>分类<span class="badge">0</span></a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="fa fa-fw fa-archive"></i>归档<span class="badge">20</span></a>

  </li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>

</nav>
  <div class="site-search">
    <div class="popup search-popup">
    <div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocorrect="off" autocapitalize="none"
           placeholder="搜索..." spellcheck="false"
           type="text" id="search-input">
  </div>
  <span class="popup-btn-close">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div id="search-result"></div>

</div>
<div class="search-pop-overlay"></div>

  </div>
</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content">
            

  <div class="posts-expand">
      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block " lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://liupan.run/2020/01/03/019-CSS%E4%B8%AD%E5%B8%B8%E7%94%A8%E5%BD%A2%E7%8A%B6/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="liupan">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="刘攀的个人专栏">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          019-CSS中常用形状
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>
              

              <time title="创建时间：2020-01-03 15:01:01 / 修改时间：19:56:15" itemprop="dateCreated datePublished" datetime="2020-01-03T15:01:01+08:00">2020-01-03</time>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <blockquote>
<p>css常用形状</p>
</blockquote>
<a id="more"></a>

<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br><span class="line">277</span><br><span class="line">278</span><br><span class="line">279</span><br><span class="line">280</span><br><span class="line">281</span><br><span class="line">282</span><br><span class="line">283</span><br><span class="line">284</span><br><span class="line">285</span><br><span class="line">286</span><br><span class="line">287</span><br><span class="line">288</span><br><span class="line">289</span><br><span class="line">290</span><br><span class="line">291</span><br><span class="line">292</span><br><span class="line">293</span><br><span class="line">294</span><br><span class="line">295</span><br><span class="line">296</span><br><span class="line">297</span><br><span class="line">298</span><br><span class="line">299</span><br><span class="line">300</span><br><span class="line">301</span><br><span class="line">302</span><br><span class="line">303</span><br><span class="line">304</span><br><span class="line">305</span><br><span class="line">306</span><br><span class="line">307</span><br><span class="line">308</span><br><span class="line">309</span><br><span class="line">310</span><br><span class="line">311</span><br><span class="line">312</span><br><span class="line">313</span><br><span class="line">314</span><br><span class="line">315</span><br><span class="line">316</span><br><span class="line">317</span><br><span class="line">318</span><br><span class="line">319</span><br><span class="line">320</span><br><span class="line">321</span><br><span class="line">322</span><br><span class="line">323</span><br><span class="line">324</span><br><span class="line">325</span><br><span class="line">326</span><br><span class="line">327</span><br><span class="line">328</span><br><span class="line">329</span><br><span class="line">330</span><br><span class="line">331</span><br><span class="line">332</span><br><span class="line">333</span><br><span class="line">334</span><br><span class="line">335</span><br><span class="line">336</span><br><span class="line">337</span><br><span class="line">338</span><br><span class="line">339</span><br><span class="line">340</span><br><span class="line">341</span><br><span class="line">342</span><br><span class="line">343</span><br><span class="line">344</span><br><span class="line">345</span><br><span class="line">346</span><br><span class="line">347</span><br><span class="line">348</span><br><span class="line">349</span><br><span class="line">350</span><br><span class="line">351</span><br><span class="line">352</span><br><span class="line">353</span><br><span class="line">354</span><br><span class="line">355</span><br><span class="line">356</span><br><span class="line">357</span><br><span class="line">358</span><br><span class="line">359</span><br><span class="line">360</span><br><span class="line">361</span><br><span class="line">362</span><br><span class="line">363</span><br><span class="line">364</span><br><span class="line">365</span><br><span class="line">366</span><br><span class="line">367</span><br><span class="line">368</span><br><span class="line">369</span><br><span class="line">370</span><br><span class="line">371</span><br><span class="line">372</span><br><span class="line">373</span><br><span class="line">374</span><br><span class="line">375</span><br><span class="line">376</span><br><span class="line">377</span><br><span class="line">378</span><br><span class="line">379</span><br><span class="line">380</span><br><span class="line">381</span><br><span class="line">382</span><br><span class="line">383</span><br><span class="line">384</span><br><span class="line">385</span><br><span class="line">386</span><br><span class="line">387</span><br><span class="line">388</span><br><span class="line">389</span><br><span class="line">390</span><br><span class="line">391</span><br><span class="line">392</span><br><span class="line">393</span><br><span class="line">394</span><br><span class="line">395</span><br><span class="line">396</span><br><span class="line">397</span><br><span class="line">398</span><br><span class="line">399</span><br><span class="line">400</span><br><span class="line">401</span><br><span class="line">402</span><br><span class="line">403</span><br><span class="line">404</span><br><span class="line">405</span><br><span class="line">406</span><br><span class="line">407</span><br><span class="line">408</span><br><span class="line">409</span><br><span class="line">410</span><br><span class="line">411</span><br><span class="line">412</span><br><span class="line">413</span><br><span class="line">414</span><br><span class="line">415</span><br><span class="line">416</span><br><span class="line">417</span><br><span class="line">418</span><br><span class="line">419</span><br><span class="line">420</span><br><span class="line">421</span><br><span class="line">422</span><br><span class="line">423</span><br><span class="line">424</span><br><span class="line">425</span><br><span class="line">426</span><br><span class="line">427</span><br><span class="line">428</span><br><span class="line">429</span><br><span class="line">430</span><br><span class="line">431</span><br><span class="line">432</span><br><span class="line">433</span><br><span class="line">434</span><br><span class="line">435</span><br><span class="line">436</span><br><span class="line">437</span><br><span class="line">438</span><br><span class="line">439</span><br><span class="line">440</span><br><span class="line">441</span><br><span class="line">442</span><br><span class="line">443</span><br><span class="line">444</span><br><span class="line">445</span><br><span class="line">446</span><br><span class="line">447</span><br><span class="line">448</span><br><span class="line">449</span><br><span class="line">450</span><br><span class="line">451</span><br><span class="line">452</span><br><span class="line">453</span><br><span class="line">454</span><br><span class="line">455</span><br><span class="line">456</span><br><span class="line">457</span><br><span class="line">458</span><br><span class="line">459</span><br><span class="line">460</span><br><span class="line">461</span><br><span class="line">462</span><br><span class="line">463</span><br><span class="line">464</span><br><span class="line">465</span><br><span class="line">466</span><br><span class="line">467</span><br><span class="line">468</span><br><span class="line">469</span><br><span class="line">470</span><br><span class="line">471</span><br><span class="line">472</span><br><span class="line">473</span><br><span class="line">474</span><br><span class="line">475</span><br><span class="line">476</span><br><span class="line">477</span><br><span class="line">478</span><br><span class="line">479</span><br><span class="line">480</span><br><span class="line">481</span><br><span class="line">482</span><br><span class="line">483</span><br><span class="line">484</span><br><span class="line">485</span><br><span class="line">486</span><br><span class="line">487</span><br><span class="line">488</span><br><span class="line">489</span><br><span class="line">490</span><br><span class="line">491</span><br><span class="line">492</span><br><span class="line">493</span><br><span class="line">494</span><br><span class="line">495</span><br><span class="line">496</span><br><span class="line">497</span><br><span class="line">498</span><br><span class="line">499</span><br><span class="line">500</span><br><span class="line">501</span><br><span class="line">502</span><br><span class="line">503</span><br><span class="line">504</span><br><span class="line">505</span><br><span class="line">506</span><br><span class="line">507</span><br><span class="line">508</span><br><span class="line">509</span><br><span class="line">510</span><br><span class="line">511</span><br><span class="line">512</span><br><span class="line">513</span><br><span class="line">514</span><br><span class="line">515</span><br><span class="line">516</span><br><span class="line">517</span><br><span class="line">518</span><br><span class="line">519</span><br><span class="line">520</span><br><span class="line">521</span><br><span class="line">522</span><br><span class="line">523</span><br><span class="line">524</span><br><span class="line">525</span><br><span class="line">526</span><br><span class="line">527</span><br><span class="line">528</span><br><span class="line">529</span><br><span class="line">530</span><br><span class="line">531</span><br><span class="line">532</span><br><span class="line">533</span><br><span class="line">534</span><br><span class="line">535</span><br><span class="line">536</span><br><span class="line">537</span><br><span class="line">538</span><br><span class="line">539</span><br><span class="line">540</span><br><span class="line">541</span><br><span class="line">542</span><br><span class="line">543</span><br><span class="line">544</span><br><span class="line">545</span><br><span class="line">546</span><br><span class="line">547</span><br><span class="line">548</span><br><span class="line">549</span><br><span class="line">550</span><br><span class="line">551</span><br><span class="line">552</span><br><span class="line">553</span><br><span class="line">554</span><br><span class="line">555</span><br><span class="line">556</span><br><span class="line">557</span><br><span class="line">558</span><br><span class="line">559</span><br><span class="line">560</span><br><span class="line">561</span><br><span class="line">562</span><br><span class="line">563</span><br><span class="line">564</span><br><span class="line">565</span><br><span class="line">566</span><br><span class="line">567</span><br><span class="line">568</span><br><span class="line">569</span><br><span class="line">570</span><br><span class="line">571</span><br><span class="line">572</span><br><span class="line">573</span><br><span class="line">574</span><br><span class="line">575</span><br><span class="line">576</span><br><span class="line">577</span><br><span class="line">578</span><br><span class="line">579</span><br><span class="line">580</span><br><span class="line">581</span><br><span class="line">582</span><br><span class="line">583</span><br><span class="line">584</span><br><span class="line">585</span><br><span class="line">586</span><br><span class="line">587</span><br><span class="line">588</span><br><span class="line">589</span><br><span class="line">590</span><br><span class="line">591</span><br><span class="line">592</span><br><span class="line">593</span><br><span class="line">594</span><br><span class="line">595</span><br><span class="line">596</span><br><span class="line">597</span><br><span class="line">598</span><br><span class="line">599</span><br><span class="line">600</span><br><span class="line">601</span><br><span class="line">602</span><br><span class="line">603</span><br><span class="line">604</span><br><span class="line">605</span><br><span class="line">606</span><br><span class="line">607</span><br><span class="line">608</span><br><span class="line">609</span><br><span class="line">610</span><br><span class="line">611</span><br><span class="line">612</span><br><span class="line">613</span><br><span class="line">614</span><br><span class="line">615</span><br><span class="line">616</span><br><span class="line">617</span><br><span class="line">618</span><br><span class="line">619</span><br><span class="line">620</span><br><span class="line">621</span><br><span class="line">622</span><br><span class="line">623</span><br><span class="line">624</span><br><span class="line">625</span><br><span class="line">626</span><br><span class="line">627</span><br><span class="line">628</span><br><span class="line">629</span><br><span class="line">630</span><br><span class="line">631</span><br><span class="line">632</span><br><span class="line">633</span><br><span class="line">634</span><br><span class="line">635</span><br><span class="line">636</span><br><span class="line">637</span><br><span class="line">638</span><br><span class="line">639</span><br><span class="line">640</span><br><span class="line">641</span><br><span class="line">642</span><br><span class="line">643</span><br><span class="line">644</span><br><span class="line">645</span><br><span class="line">646</span><br><span class="line">647</span><br><span class="line">648</span><br><span class="line">649</span><br><span class="line">650</span><br><span class="line">651</span><br><span class="line">652</span><br><span class="line">653</span><br><span class="line">654</span><br><span class="line">655</span><br><span class="line">656</span><br><span class="line">657</span><br><span class="line">658</span><br><span class="line">659</span><br><span class="line">660</span><br><span class="line">661</span><br><span class="line">662</span><br><span class="line">663</span><br><span class="line">664</span><br><span class="line">665</span><br><span class="line">666</span><br><span class="line">667</span><br><span class="line">668</span><br><span class="line">669</span><br><span class="line">670</span><br><span class="line">671</span><br><span class="line">672</span><br><span class="line">673</span><br><span class="line">674</span><br><span class="line">675</span><br><span class="line">676</span><br><span class="line">677</span><br><span class="line">678</span><br><span class="line">679</span><br><span class="line">680</span><br><span class="line">681</span><br><span class="line">682</span><br><span class="line">683</span><br><span class="line">684</span><br><span class="line">685</span><br><span class="line">686</span><br><span class="line">687</span><br><span class="line">688</span><br><span class="line">689</span><br><span class="line">690</span><br><span class="line">691</span><br><span class="line">692</span><br><span class="line">693</span><br><span class="line">694</span><br><span class="line">695</span><br><span class="line">696</span><br><span class="line">697</span><br><span class="line">698</span><br><span class="line">699</span><br><span class="line">700</span><br><span class="line">701</span><br><span class="line">702</span><br><span class="line">703</span><br><span class="line">704</span><br><span class="line">705</span><br><span class="line">706</span><br><span class="line">707</span><br><span class="line">708</span><br><span class="line">709</span><br><span class="line">710</span><br><span class="line">711</span><br><span class="line">712</span><br><span class="line">713</span><br><span class="line">714</span><br><span class="line">715</span><br><span class="line">716</span><br><span class="line">717</span><br><span class="line">718</span><br><span class="line">719</span><br><span class="line">720</span><br><span class="line">721</span><br><span class="line">722</span><br><span class="line">723</span><br><span class="line">724</span><br><span class="line">725</span><br><span class="line">726</span><br><span class="line">727</span><br><span class="line">728</span><br><span class="line">729</span><br><span class="line">730</span><br><span class="line">731</span><br><span class="line">732</span><br><span class="line">733</span><br><span class="line">734</span><br><span class="line">735</span><br><span class="line">736</span><br><span class="line">737</span><br><span class="line">738</span><br><span class="line">739</span><br><span class="line">740</span><br><span class="line">741</span><br><span class="line">742</span><br><span class="line">743</span><br><span class="line">744</span><br><span class="line">745</span><br><span class="line">746</span><br><span class="line">747</span><br><span class="line">748</span><br><span class="line">749</span><br><span class="line">750</span><br><span class="line">751</span><br><span class="line">752</span><br><span class="line">753</span><br><span class="line">754</span><br><span class="line">755</span><br><span class="line">756</span><br><span class="line">757</span><br><span class="line">758</span><br><span class="line">759</span><br><span class="line">760</span><br><span class="line">761</span><br><span class="line">762</span><br><span class="line">763</span><br><span class="line">764</span><br><span class="line">765</span><br><span class="line">766</span><br><span class="line">767</span><br><span class="line">768</span><br><span class="line">769</span><br><span class="line">770</span><br><span class="line">771</span><br><span class="line">772</span><br><span class="line">773</span><br><span class="line">774</span><br><span class="line">775</span><br><span class="line">776</span><br><span class="line">777</span><br><span class="line">778</span><br><span class="line">779</span><br><span class="line">780</span><br><span class="line">781</span><br><span class="line">782</span><br><span class="line">783</span><br><span class="line">784</span><br><span class="line">785</span><br><span class="line">786</span><br><span class="line">787</span><br><span class="line">788</span><br><span class="line">789</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#square</span> &#123;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">      <span class="attribute">background</span>: red;</span><br><span class="line">    &#125;</span><br><span class="line"><span class="selector-id">#rectangle</span> &#123;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">      <span class="attribute">background</span>: red;</span><br><span class="line">    &#125;</span><br><span class="line"><span class="selector-id">#circle</span> &#123;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">      <span class="attribute">background</span>: red;</span><br><span class="line">      <span class="attribute">border-radius</span>: <span class="number">50%</span></span><br><span class="line">    &#125;</span><br><span class="line"><span class="selector-id">#oval</span> &#123;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">      <span class="attribute">background</span>: red;</span><br><span class="line">      <span class="attribute">border-radius</span>: <span class="number">100px</span> / <span class="number">50px</span>;</span><br><span class="line">    &#125;</span><br><span class="line"><span class="selector-id">#triangle-up</span> &#123;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">border-left</span>: <span class="number">50px</span> solid transparent;</span><br><span class="line">      <span class="attribute">border-right</span>: <span class="number">50px</span> solid transparent;</span><br><span class="line">      <span class="attribute">border-bottom</span>: <span class="number">100px</span> solid red;</span><br><span class="line">    &#125;</span><br><span class="line"><span class="selector-id">#triangle-down</span> &#123;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">border-left</span>: <span class="number">50px</span> solid transparent;</span><br><span class="line">      <span class="attribute">border-right</span>: <span class="number">50px</span> solid transparent;</span><br><span class="line">      <span class="attribute">border-top</span>: <span class="number">100px</span> solid red;</span><br><span class="line">    &#125;</span><br><span class="line"><span class="selector-id">#triangle-left</span> &#123;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">border-top</span>: <span class="number">50px</span> solid transparent;</span><br><span class="line">      <span class="attribute">border-right</span>: <span class="number">100px</span> solid red;</span><br><span class="line">      <span class="attribute">border-bottom</span>: <span class="number">50px</span> solid transparent;</span><br><span class="line">    &#125;</span><br><span class="line"> <span class="selector-id">#triangle-right</span> &#123;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">border-top</span>: <span class="number">50px</span> solid transparent;</span><br><span class="line">      <span class="attribute">border-left</span>: <span class="number">100px</span> solid red;</span><br><span class="line">      <span class="attribute">border-bottom</span>: <span class="number">50px</span> solid transparent;</span><br><span class="line">    &#125;</span><br><span class="line"><span class="selector-id">#triangle-topleft</span> &#123;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">border-top</span>: <span class="number">100px</span> solid red;</span><br><span class="line">      <span class="attribute">border-right</span>: <span class="number">100px</span> solid transparent;</span><br><span class="line">    &#125;</span><br><span class="line"><span class="selector-id">#triangle-topright</span> &#123;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">border-top</span>: <span class="number">100px</span> solid red;</span><br><span class="line">      <span class="attribute">border-left</span>: <span class="number">100px</span> solid transparent;</span><br><span class="line">    &#125;</span><br><span class="line"><span class="selector-id">#curvedarrow</span> &#123;</span><br><span class="line">      <span class="attribute">position</span>: relative;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">border-top</span>: <span class="number">9px</span> solid transparent;</span><br><span class="line">      <span class="attribute">border-right</span>: <span class="number">9px</span> solid red;</span><br><span class="line">      <span class="attribute">transform</span>: <span class="built_in">rotate</span>(10deg);</span><br><span class="line">    &#125;</span><br><span class="line"><span class="selector-id">#curvedarrow</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">      <span class="attribute">content</span>: <span class="string">""</span>;</span><br><span class="line">      <span class="attribute">position</span>: absolute;</span><br><span class="line">      <span class="attribute">border</span>: <span class="number">0</span> solid transparent;</span><br><span class="line">      <span class="attribute">border-top</span>: <span class="number">3px</span> solid red;</span><br><span class="line">      <span class="attribute">border-radius</span>: <span class="number">20px</span> <span class="number">0</span> <span class="number">0</span> <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">top</span>: -<span class="number">12px</span>;</span><br><span class="line">      <span class="attribute">left</span>: -<span class="number">9px</span>;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">12px</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">12px</span>;</span><br><span class="line">      <span class="attribute">transform</span>: <span class="built_in">rotate</span>(45deg);</span><br><span class="line">    &#125;</span><br><span class="line"><span class="selector-id">#trapezoid</span> &#123;</span><br><span class="line">      <span class="attribute">border-bottom</span>: <span class="number">100px</span> solid red;</span><br><span class="line">      <span class="attribute">border-left</span>: <span class="number">25px</span> solid transparent;</span><br><span class="line">      <span class="attribute">border-right</span>: <span class="number">25px</span> solid transparent;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">    &#125;</span><br><span class="line"><span class="selector-id">#parallelogram</span> &#123;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">150px</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">      <span class="attribute">transform</span>: <span class="built_in">skew</span>(20deg);</span><br><span class="line">      <span class="attribute">background</span>: red;</span><br><span class="line">    &#125;</span><br><span class="line"> <span class="selector-id">#star-six</span> &#123;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">border-left</span>: <span class="number">50px</span> solid transparent;</span><br><span class="line">      <span class="attribute">border-right</span>: <span class="number">50px</span> solid transparent;</span><br><span class="line">      <span class="attribute">border-bottom</span>: <span class="number">100px</span> solid red;</span><br><span class="line">      <span class="attribute">position</span>: relative;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-id">#star-six</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">border-left</span>: <span class="number">50px</span> solid transparent;</span><br><span class="line">      <span class="attribute">border-right</span>: <span class="number">50px</span> solid transparent;</span><br><span class="line">      <span class="attribute">border-top</span>: <span class="number">100px</span> solid red;</span><br><span class="line">      <span class="attribute">position</span>: absolute;</span><br><span class="line">      <span class="attribute">content</span>: <span class="string">""</span>;</span><br><span class="line">      <span class="attribute">top</span>: <span class="number">30px</span>;</span><br><span class="line">      <span class="attribute">left</span>: -<span class="number">50px</span>;</span><br><span class="line">    &#125;</span><br><span class="line"><span class="selector-id">#star-five</span> &#123;</span><br><span class="line">      <span class="attribute">margin</span>: <span class="number">50px</span> <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">position</span>: relative;</span><br><span class="line">      <span class="attribute">display</span>: block;</span><br><span class="line">      <span class="attribute">color</span>: red;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">0px</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">0px</span>;</span><br><span class="line">      <span class="attribute">border-right</span>: <span class="number">100px</span> solid transparent;</span><br><span class="line">      <span class="attribute">border-bottom</span>: <span class="number">70px</span> solid red;</span><br><span class="line">      <span class="attribute">border-left</span>: <span class="number">100px</span> solid transparent;</span><br><span class="line">      <span class="attribute">transform</span>: <span class="built_in">rotate</span>(35deg);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-id">#star-five</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">      <span class="attribute">border-bottom</span>: <span class="number">80px</span> solid red;</span><br><span class="line">      <span class="attribute">border-left</span>: <span class="number">30px</span> solid transparent;</span><br><span class="line">      <span class="attribute">border-right</span>: <span class="number">30px</span> solid transparent;</span><br><span class="line">      <span class="attribute">position</span>: absolute;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">top</span>: -<span class="number">45px</span>;</span><br><span class="line">      <span class="attribute">left</span>: -<span class="number">65px</span>;</span><br><span class="line">      <span class="attribute">display</span>: block;</span><br><span class="line">      <span class="attribute">content</span>: <span class="string">''</span>;</span><br><span class="line">      <span class="attribute">transform</span>: <span class="built_in">rotate</span>(-35deg);</span><br><span class="line">    &#125;</span><br><span class="line"> <span class="selector-id">#star-five</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">      <span class="attribute">position</span>: absolute;</span><br><span class="line">      <span class="attribute">display</span>: block;</span><br><span class="line">      <span class="attribute">color</span>: red;</span><br><span class="line">      <span class="attribute">top</span>: <span class="number">3px</span>;</span><br><span class="line">      <span class="attribute">left</span>: -<span class="number">105px</span>;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">0px</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">0px</span>;</span><br><span class="line">      <span class="attribute">border-right</span>: <span class="number">100px</span> solid transparent;</span><br><span class="line">      <span class="attribute">border-bottom</span>: <span class="number">70px</span> solid red;</span><br><span class="line">      <span class="attribute">border-left</span>: <span class="number">100px</span> solid transparent;</span><br><span class="line">      <span class="attribute">transform</span>: <span class="built_in">rotate</span>(-70deg);</span><br><span class="line">      <span class="attribute">content</span>: <span class="string">''</span>;</span><br><span class="line">    &#125;</span><br><span class="line"><span class="selector-id">#pentagon</span> &#123;</span><br><span class="line">      <span class="attribute">position</span>: relative;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">54px</span>;</span><br><span class="line">      <span class="attribute">box-sizing</span>: content-box;</span><br><span class="line">      <span class="attribute">border-width</span>: <span class="number">50px</span> <span class="number">18px</span> <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">border-style</span>: solid;</span><br><span class="line">      <span class="attribute">border-color</span>: red transparent;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-id">#pentagon</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">      <span class="attribute">content</span>: <span class="string">""</span>;</span><br><span class="line">      <span class="attribute">position</span>: absolute;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">top</span>: -<span class="number">85px</span>;</span><br><span class="line">      <span class="attribute">left</span>: -<span class="number">18px</span>;</span><br><span class="line">      <span class="attribute">border-width</span>: <span class="number">0</span> <span class="number">45px</span> <span class="number">35px</span>;</span><br><span class="line">      <span class="attribute">border-style</span>: solid;</span><br><span class="line">      <span class="attribute">border-color</span>: transparent transparent red;</span><br><span class="line">    &#125;</span><br><span class="line">  </span><br><span class="line"><span class="selector-id">#hexagon</span> &#123;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">55px</span>;</span><br><span class="line">      <span class="attribute">background</span>: red;</span><br><span class="line">      <span class="attribute">position</span>: relative;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-id">#hexagon</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">      <span class="attribute">content</span>: <span class="string">""</span>;</span><br><span class="line">      <span class="attribute">position</span>: absolute;</span><br><span class="line">      <span class="attribute">top</span>: -<span class="number">25px</span>;</span><br><span class="line">      <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">border-left</span>: <span class="number">50px</span> solid transparent;</span><br><span class="line">      <span class="attribute">border-right</span>: <span class="number">50px</span> solid transparent;</span><br><span class="line">      <span class="attribute">border-bottom</span>: <span class="number">25px</span> solid red;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-id">#hexagon</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">      <span class="attribute">content</span>: <span class="string">""</span>;</span><br><span class="line">      <span class="attribute">position</span>: absolute;</span><br><span class="line">      <span class="attribute">bottom</span>: -<span class="number">25px</span>;</span><br><span class="line">      <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">border-left</span>: <span class="number">50px</span> solid transparent;</span><br><span class="line">      <span class="attribute">border-right</span>: <span class="number">50px</span> solid transparent;</span><br><span class="line">      <span class="attribute">border-top</span>: <span class="number">25px</span> solid red;</span><br><span class="line">    &#125;</span><br><span class="line"> <span class="selector-id">#octagon</span> &#123;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">      <span class="attribute">background</span>: red;</span><br><span class="line">      <span class="attribute">position</span>: relative;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-id">#octagon</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">      <span class="attribute">content</span>: <span class="string">""</span>;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">position</span>: absolute;</span><br><span class="line">      <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">border-bottom</span>: <span class="number">29px</span> solid red;</span><br><span class="line">      <span class="attribute">border-left</span>: <span class="number">29px</span> solid <span class="number">#eee</span>;</span><br><span class="line">      <span class="attribute">border-right</span>: <span class="number">29px</span> solid <span class="number">#eee</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-id">#octagon</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">      <span class="attribute">content</span>: <span class="string">""</span>;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">position</span>: absolute;</span><br><span class="line">      <span class="attribute">bottom</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">border-top</span>: <span class="number">29px</span> solid red;</span><br><span class="line">      <span class="attribute">border-left</span>: <span class="number">29px</span> solid <span class="number">#eee</span>;</span><br><span class="line">      <span class="attribute">border-right</span>: <span class="number">29px</span> solid <span class="number">#eee</span>;</span><br><span class="line">    &#125;  </span><br><span class="line"><span class="selector-id">#heart</span> &#123;</span><br><span class="line">      <span class="attribute">position</span>: relative;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">90px</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-id">#heart</span><span class="selector-pseudo">:before</span>,</span><br><span class="line">    <span class="selector-id">#heart</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">      <span class="attribute">position</span>: absolute;</span><br><span class="line">      <span class="attribute">content</span>: <span class="string">""</span>;</span><br><span class="line">      <span class="attribute">left</span>: <span class="number">50px</span>;</span><br><span class="line">      <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">50px</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">80px</span>;</span><br><span class="line">      <span class="attribute">background</span>: red;</span><br><span class="line">      <span class="attribute">border-radius</span>: <span class="number">50px</span> <span class="number">50px</span> <span class="number">0</span> <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">transform</span>: <span class="built_in">rotate</span>(-45deg);</span><br><span class="line">      <span class="attribute">transform-origin</span>: <span class="number">0</span> <span class="number">100%</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-id">#heart</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">      <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">transform</span>: <span class="built_in">rotate</span>(45deg);</span><br><span class="line">      <span class="attribute">transform-origin</span>: <span class="number">100%</span> <span class="number">100%</span>;</span><br><span class="line">    &#125;</span><br><span class="line"><span class="selector-id">#infinity</span> &#123;</span><br><span class="line">      <span class="attribute">position</span>: relative;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">212px</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">      <span class="attribute">box-sizing</span>: content-box;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-id">#infinity</span><span class="selector-pseudo">:before</span>,</span><br><span class="line">    <span class="selector-id">#infinity</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">      <span class="attribute">content</span>: <span class="string">""</span>;</span><br><span class="line">      <span class="attribute">box-sizing</span>: content-box;</span><br><span class="line">      <span class="attribute">position</span>: absolute;</span><br><span class="line">      <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">60px</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">60px</span>;</span><br><span class="line">      <span class="attribute">border</span>: <span class="number">20px</span> solid red;</span><br><span class="line">      <span class="attribute">border-radius</span>: <span class="number">50px</span> <span class="number">50px</span> <span class="number">0</span> <span class="number">50px</span>;</span><br><span class="line">      <span class="attribute">transform</span>: <span class="built_in">rotate</span>(-45deg);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-id">#infinity</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">      <span class="attribute">left</span>: auto;</span><br><span class="line">      <span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">border-radius</span>: <span class="number">50px</span> <span class="number">50px</span> <span class="number">50px</span> <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">transform</span>: <span class="built_in">rotate</span>(45deg);</span><br><span class="line">    &#125;</span><br><span class="line"><span class="selector-id">#diamond</span> &#123;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">border</span>: <span class="number">50px</span> solid transparent;</span><br><span class="line">      <span class="attribute">border-bottom-color</span>: red;</span><br><span class="line">      <span class="attribute">position</span>: relative;</span><br><span class="line">      <span class="attribute">top</span>: -<span class="number">50px</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-id">#diamond</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">      <span class="attribute">content</span>: <span class="string">''</span>;</span><br><span class="line">      <span class="attribute">position</span>: absolute;</span><br><span class="line">      <span class="attribute">left</span>: -<span class="number">50px</span>;</span><br><span class="line">      <span class="attribute">top</span>: <span class="number">50px</span>;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">border</span>: <span class="number">50px</span> solid transparent;</span><br><span class="line">      <span class="attribute">border-top-color</span>: red;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="selector-id">#diamond-shield</span> &#123;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">border</span>: <span class="number">50px</span> solid transparent;</span><br><span class="line">      <span class="attribute">border-bottom</span>: <span class="number">20px</span> solid red;</span><br><span class="line">      <span class="attribute">position</span>: relative;</span><br><span class="line">      <span class="attribute">top</span>: -<span class="number">50px</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-id">#diamond-shield</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">      <span class="attribute">content</span>: <span class="string">''</span>;</span><br><span class="line">      <span class="attribute">position</span>: absolute;</span><br><span class="line">      <span class="attribute">left</span>: -<span class="number">50px</span>;</span><br><span class="line">      <span class="attribute">top</span>: <span class="number">20px</span>;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">border</span>: <span class="number">50px</span> solid transparent;</span><br><span class="line">      <span class="attribute">border-top</span>: <span class="number">70px</span> solid red;</span><br><span class="line">    &#125;</span><br><span class="line"><span class="selector-id">#cut-diamond</span> &#123;</span><br><span class="line">      <span class="attribute">border-style</span>: solid;</span><br><span class="line">      <span class="attribute">border-color</span>: transparent transparent red transparent;</span><br><span class="line">      <span class="attribute">border-width</span>: <span class="number">0</span> <span class="number">25px</span> <span class="number">25px</span> <span class="number">25px</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">50px</span>;</span><br><span class="line">      <span class="attribute">box-sizing</span>: content-box;</span><br><span class="line">      <span class="attribute">position</span>: relative;</span><br><span class="line">      <span class="attribute">margin</span>: <span class="number">20px</span> <span class="number">0</span> <span class="number">50px</span> <span class="number">0</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-id">#cut-diamond</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">      <span class="attribute">content</span>: <span class="string">""</span>;</span><br><span class="line">      <span class="attribute">position</span>: absolute;</span><br><span class="line">      <span class="attribute">top</span>: <span class="number">25px</span>;</span><br><span class="line">      <span class="attribute">left</span>: -<span class="number">25px</span>;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">border-style</span>: solid;</span><br><span class="line">      <span class="attribute">border-color</span>: red transparent transparent transparent;</span><br><span class="line">      <span class="attribute">border-width</span>: <span class="number">70px</span> <span class="number">50px</span> <span class="number">0</span> <span class="number">50px</span>;</span><br><span class="line">    &#125;</span><br><span class="line"><span class="selector-id">#egg</span> &#123;</span><br><span class="line">      <span class="attribute">display</span>: block;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">126px</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">180px</span>;</span><br><span class="line">      <span class="attribute">background-color</span>: red;</span><br><span class="line">      <span class="attribute">border-radius</span>: <span class="number">50%</span> <span class="number">50%</span> <span class="number">50%</span> <span class="number">50%</span> / <span class="number">60%</span> <span class="number">60%</span> <span class="number">40%</span> <span class="number">40%</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="selector-id">#pacman</span> &#123;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">0px</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">0px</span>;</span><br><span class="line">      <span class="attribute">border-right</span>: <span class="number">60px</span> solid transparent;</span><br><span class="line">      <span class="attribute">border-top</span>: <span class="number">60px</span> solid red;</span><br><span class="line">      <span class="attribute">border-left</span>: <span class="number">60px</span> solid red;</span><br><span class="line">      <span class="attribute">border-bottom</span>: <span class="number">60px</span> solid red;</span><br><span class="line">      <span class="attribute">border-top-left-radius</span>: <span class="number">60px</span>;</span><br><span class="line">      <span class="attribute">border-top-right-radius</span>: <span class="number">60px</span>;</span><br><span class="line">      <span class="attribute">border-bottom-left-radius</span>: <span class="number">60px</span>;</span><br><span class="line">      <span class="attribute">border-bottom-right-radius</span>: <span class="number">60px</span>;</span><br><span class="line">    &#125;</span><br><span class="line"><span class="selector-id">#talkbubble</span> &#123;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">120px</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">80px</span>;</span><br><span class="line">      <span class="attribute">background</span>: red;</span><br><span class="line">      <span class="attribute">position</span>: relative;</span><br><span class="line">      <span class="attribute">-moz-border-radius</span>: <span class="number">10px</span>;</span><br><span class="line">      <span class="attribute">-webkit-border-radius</span>: <span class="number">10px</span>;</span><br><span class="line">      <span class="attribute">border-radius</span>: <span class="number">10px</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-id">#talkbubble</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">      <span class="attribute">content</span>: <span class="string">""</span>;</span><br><span class="line">      <span class="attribute">position</span>: absolute;</span><br><span class="line">      <span class="attribute">right</span>: <span class="number">100%</span>;</span><br><span class="line">      <span class="attribute">top</span>: <span class="number">26px</span>;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">border-top</span>: <span class="number">13px</span> solid transparent;</span><br><span class="line">      <span class="attribute">border-right</span>: <span class="number">26px</span> solid red;</span><br><span class="line">      <span class="attribute">border-bottom</span>: <span class="number">13px</span> solid transparent;</span><br><span class="line">    &#125;</span><br><span class="line"> <span class="selector-id">#rss</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">20em</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">20em</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">3em</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#ff0000</span>;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">14px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-id">#rss</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">    <span class="attribute">content</span>: <span class="string">''</span>;</span><br><span class="line">    <span class="attribute">z-index</span>: <span class="number">1</span>;</span><br><span class="line">    <span class="attribute">display</span>: block;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">5em</span>;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">5em</span>;</span><br><span class="line">    <span class="attribute">background</span>: <span class="number">#fff</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">50%</span>;</span><br><span class="line">    <span class="attribute">position</span>: relative;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">11.5em</span>;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">3.5em</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-id">#rss</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">    <span class="attribute">content</span>: <span class="string">''</span>;</span><br><span class="line">    <span class="attribute">display</span>: block;</span><br><span class="line">    <span class="attribute">background</span>: <span class="number">#ff0000</span>;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">13em</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">13em</span>;</span><br><span class="line">    <span class="attribute">top</span>: -<span class="number">2em</span>;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">3.8em</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">2.5em</span>;</span><br><span class="line">    <span class="attribute">position</span>: relative;</span><br><span class="line">    <span class="attribute">box-shadow</span>: </span><br><span class="line">      -<span class="number">2em</span> <span class="number">2em</span> <span class="number">0</span> <span class="number">0</span> <span class="number">#fff</span> inset, </span><br><span class="line">      -<span class="number">4em</span> <span class="number">4em</span> <span class="number">0</span> <span class="number">0</span> <span class="number">#ff0000</span> inset,</span><br><span class="line">      -<span class="number">6em</span> <span class="number">6em</span> <span class="number">0</span> <span class="number">0</span> <span class="number">#fff</span> inset</span><br><span class="line">  &#125;</span><br><span class="line"> <span class="selector-id">#burst-12</span> &#123;</span><br><span class="line">      <span class="attribute">background</span>: red;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">80px</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">80px</span>;</span><br><span class="line">      <span class="attribute">position</span>: relative;</span><br><span class="line">      <span class="attribute">text-align</span>: center;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-id">#burst-12</span><span class="selector-pseudo">:before</span>,</span><br><span class="line">    <span class="selector-id">#burst-12</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">      <span class="attribute">content</span>: <span class="string">""</span>;</span><br><span class="line">      <span class="attribute">position</span>: absolute;</span><br><span class="line">      <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">80px</span>;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">80px</span>;</span><br><span class="line">      <span class="attribute">background</span>: red;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-id">#burst-12</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">      <span class="attribute">transform</span>: <span class="built_in">rotate</span>(30deg);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-id">#burst-12</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">      <span class="attribute">transform</span>: <span class="built_in">rotate</span>(60deg);</span><br><span class="line">    &#125;</span><br><span class="line"> <span class="selector-id">#burst-8</span> &#123;</span><br><span class="line">      <span class="attribute">background</span>: red;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">80px</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">80px</span>;</span><br><span class="line">      <span class="attribute">position</span>: relative;</span><br><span class="line">      <span class="attribute">text-align</span>: center;</span><br><span class="line">      <span class="attribute">transform</span>: <span class="built_in">rotate</span>(20deg);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-id">#burst-8</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">      <span class="attribute">content</span>: <span class="string">""</span>;</span><br><span class="line">      <span class="attribute">position</span>: absolute;</span><br><span class="line">      <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">80px</span>;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">80px</span>;</span><br><span class="line">      <span class="attribute">background</span>: red;</span><br><span class="line">      <span class="attribute">transform</span>: <span class="built_in">rotate</span>(135deg);</span><br><span class="line">    &#125;</span><br><span class="line">   <span class="selector-id">#yin-yang</span> &#123;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">96px</span>;</span><br><span class="line">      <span class="attribute">box-sizing</span>: content-box;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">48px</span>;</span><br><span class="line">      <span class="attribute">background</span>: <span class="number">#eee</span>;</span><br><span class="line">      <span class="attribute">border-color</span>: red;</span><br><span class="line">      <span class="attribute">border-style</span>: solid;</span><br><span class="line">      <span class="attribute">border-width</span>: <span class="number">2px</span> <span class="number">2px</span> <span class="number">50px</span> <span class="number">2px</span>;</span><br><span class="line">      <span class="attribute">border-radius</span>: <span class="number">100%</span>;</span><br><span class="line">      <span class="attribute">position</span>: relative;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-id">#yin-yang</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">      <span class="attribute">content</span>: <span class="string">""</span>;</span><br><span class="line">      <span class="attribute">position</span>: absolute;</span><br><span class="line">      <span class="attribute">top</span>: <span class="number">50%</span>;</span><br><span class="line">      <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">background</span>: <span class="number">#eee</span>;</span><br><span class="line">      <span class="attribute">border</span>: <span class="number">18px</span> solid red;</span><br><span class="line">      <span class="attribute">border-radius</span>: <span class="number">100%</span>;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">12px</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">12px</span>;</span><br><span class="line">      <span class="attribute">box-sizing</span>: content-box;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-id">#yin-yang</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">      <span class="attribute">content</span>: <span class="string">""</span>;</span><br><span class="line">      <span class="attribute">position</span>: absolute;</span><br><span class="line">      <span class="attribute">top</span>: <span class="number">50%</span>;</span><br><span class="line">      <span class="attribute">left</span>: <span class="number">50%</span>;</span><br><span class="line">      <span class="attribute">background</span>: red;</span><br><span class="line">      <span class="attribute">border</span>: <span class="number">18px</span> solid <span class="number">#eee</span>;</span><br><span class="line">      <span class="attribute">border-radius</span>: <span class="number">100%</span>;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">12px</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">12px</span>;</span><br><span class="line">      <span class="attribute">box-sizing</span>: content-box;</span><br><span class="line">    &#125;</span><br><span class="line"> <span class="selector-id">#badge-ribbon</span> &#123;</span><br><span class="line">      <span class="attribute">position</span>: relative;</span><br><span class="line">      <span class="attribute">background</span>: red;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">      <span class="attribute">border-radius</span>: <span class="number">50px</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-id">#badge-ribbon</span><span class="selector-pseudo">:before</span>,</span><br><span class="line">    <span class="selector-id">#badge-ribbon</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">      <span class="attribute">content</span>: <span class="string">''</span>;</span><br><span class="line">      <span class="attribute">position</span>: absolute;</span><br><span class="line">      <span class="attribute">border-bottom</span>: <span class="number">70px</span> solid red;</span><br><span class="line">      <span class="attribute">border-left</span>: <span class="number">40px</span> solid transparent;</span><br><span class="line">      <span class="attribute">border-right</span>: <span class="number">40px</span> solid transparent;</span><br><span class="line">      <span class="attribute">top</span>: <span class="number">70px</span>;</span><br><span class="line">      <span class="attribute">left</span>: -<span class="number">10px</span>;</span><br><span class="line">      <span class="attribute">transform</span>: <span class="built_in">rotate</span>(-140deg);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-id">#badge-ribbon</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">      <span class="attribute">left</span>: auto;</span><br><span class="line">      <span class="attribute">right</span>: -<span class="number">10px</span>;</span><br><span class="line">      <span class="attribute">transform</span>: <span class="built_in">rotate</span>(140deg);</span><br><span class="line">    &#125;</span><br><span class="line"><span class="selector-id">#space-invader</span> &#123;</span><br><span class="line">      <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">0</span> <span class="number">1em</span> red,</span><br><span class="line">      <span class="number">0</span> <span class="number">1em</span> <span class="number">0</span> <span class="number">1em</span> red,</span><br><span class="line">      -<span class="number">2.5em</span> <span class="number">1.5em</span> <span class="number">0</span> .<span class="number">5em</span> red,</span><br><span class="line">      <span class="number">2.5em</span> <span class="number">1.5em</span> <span class="number">0</span> .<span class="number">5em</span> red,</span><br><span class="line">      -<span class="number">3em</span> -<span class="number">3em</span> <span class="number">0</span> <span class="number">0</span> red,</span><br><span class="line">      <span class="number">3em</span> -<span class="number">3em</span> <span class="number">0</span> <span class="number">0</span> red,</span><br><span class="line">      -<span class="number">2em</span> -<span class="number">2em</span> <span class="number">0</span> <span class="number">0</span> red,</span><br><span class="line">      <span class="number">2em</span> -<span class="number">2em</span> <span class="number">0</span> <span class="number">0</span> red,</span><br><span class="line">      -<span class="number">3em</span> -<span class="number">1em</span> <span class="number">0</span> <span class="number">0</span> red,</span><br><span class="line">      -<span class="number">2em</span> -<span class="number">1em</span> <span class="number">0</span> <span class="number">0</span> red,</span><br><span class="line">      <span class="number">2em</span> -<span class="number">1em</span> <span class="number">0</span> <span class="number">0</span> red,</span><br><span class="line">      <span class="number">3em</span> -<span class="number">1em</span> <span class="number">0</span> <span class="number">0</span> red,</span><br><span class="line">      -<span class="number">4em</span> <span class="number">0</span> <span class="number">0</span> <span class="number">0</span> red,</span><br><span class="line">      -<span class="number">3em</span> <span class="number">0</span> <span class="number">0</span> <span class="number">0</span> red,</span><br><span class="line">      <span class="number">3em</span> <span class="number">0</span> <span class="number">0</span> <span class="number">0</span> red,</span><br><span class="line">      <span class="number">4em</span> <span class="number">0</span> <span class="number">0</span> <span class="number">0</span> red,</span><br><span class="line">      -<span class="number">5em</span> <span class="number">1em</span> <span class="number">0</span> <span class="number">0</span> red,</span><br><span class="line">      -<span class="number">4em</span> <span class="number">1em</span> <span class="number">0</span> <span class="number">0</span> red,</span><br><span class="line">      <span class="number">4em</span> <span class="number">1em</span> <span class="number">0</span> <span class="number">0</span> red,</span><br><span class="line">      <span class="number">5em</span> <span class="number">1em</span> <span class="number">0</span> <span class="number">0</span> red,</span><br><span class="line">      -<span class="number">5em</span> <span class="number">2em</span> <span class="number">0</span> <span class="number">0</span> red,</span><br><span class="line">      <span class="number">5em</span> <span class="number">2em</span> <span class="number">0</span> <span class="number">0</span> red,</span><br><span class="line">      -<span class="number">5em</span> <span class="number">3em</span> <span class="number">0</span> <span class="number">0</span> red,</span><br><span class="line">      -<span class="number">3em</span> <span class="number">3em</span> <span class="number">0</span> <span class="number">0</span> red,</span><br><span class="line">      <span class="number">3em</span> <span class="number">3em</span> <span class="number">0</span> <span class="number">0</span> red,</span><br><span class="line">      <span class="number">5em</span> <span class="number">3em</span> <span class="number">0</span> <span class="number">0</span> red,</span><br><span class="line">      -<span class="number">2em</span> <span class="number">4em</span> <span class="number">0</span> <span class="number">0</span> red,</span><br><span class="line">      -<span class="number">1em</span> <span class="number">4em</span> <span class="number">0</span> <span class="number">0</span> red,</span><br><span class="line">      <span class="number">1em</span> <span class="number">4em</span> <span class="number">0</span> <span class="number">0</span> red,</span><br><span class="line">      <span class="number">2em</span> <span class="number">4em</span> <span class="number">0</span> <span class="number">0</span> red;</span><br><span class="line">      <span class="attribute">background</span>: red;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">1em</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">1em</span>;</span><br><span class="line">      <span class="attribute">overflow</span>: hidden;</span><br><span class="line">      <span class="attribute">margin</span>: <span class="number">50px</span> <span class="number">0</span> <span class="number">70px</span> <span class="number">65px</span>;</span><br><span class="line">    &#125;</span><br><span class="line"><span class="selector-id">#tv</span> &#123;</span><br><span class="line">      <span class="attribute">position</span>: relative;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">150px</span>;</span><br><span class="line">      <span class="attribute">margin</span>: <span class="number">20px</span> <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">background</span>: red;</span><br><span class="line">      <span class="attribute">border-radius</span>: <span class="number">50%</span> / <span class="number">10%</span>;</span><br><span class="line">      <span class="attribute">color</span>: white;</span><br><span class="line">      <span class="attribute">text-align</span>: center;</span><br><span class="line">      <span class="attribute">text-indent</span>: .<span class="number">1em</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-id">#tv</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">      <span class="attribute">content</span>: <span class="string">''</span>;</span><br><span class="line">      <span class="attribute">position</span>: absolute;</span><br><span class="line">      <span class="attribute">top</span>: <span class="number">10%</span>;</span><br><span class="line">      <span class="attribute">bottom</span>: <span class="number">10%</span>;</span><br><span class="line">      <span class="attribute">right</span>: -<span class="number">5%</span>;</span><br><span class="line">      <span class="attribute">left</span>: -<span class="number">5%</span>;</span><br><span class="line">      <span class="attribute">background</span>: inherit;</span><br><span class="line">      <span class="attribute">border-radius</span>: <span class="number">5%</span> / <span class="number">50%</span>;</span><br><span class="line">    &#125;</span><br><span class="line"> <span class="selector-id">#chevron</span> &#123;</span><br><span class="line">      <span class="attribute">position</span>: relative;</span><br><span class="line">      <span class="attribute">text-align</span>: center;</span><br><span class="line">      <span class="attribute">padding</span>: <span class="number">12px</span>;</span><br><span class="line">      <span class="attribute">margin-bottom</span>: <span class="number">6px</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">60px</span>;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-id">#chevron</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">      <span class="attribute">content</span>: <span class="string">''</span>;</span><br><span class="line">      <span class="attribute">position</span>: absolute;</span><br><span class="line">      <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">51%</span>;</span><br><span class="line">      <span class="attribute">background</span>: red;</span><br><span class="line">      <span class="attribute">transform</span>: <span class="built_in">skew</span>(0deg, 6deg);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-id">#chevron</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">      <span class="attribute">content</span>: <span class="string">''</span>;</span><br><span class="line">      <span class="attribute">position</span>: absolute;</span><br><span class="line">      <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">50%</span>;</span><br><span class="line">      <span class="attribute">background</span>: red;</span><br><span class="line">      <span class="attribute">transform</span>: <span class="built_in">skew</span>(0deg, -6deg);</span><br><span class="line">    &#125;</span><br><span class="line">  <span class="selector-id">#magnifying-glass</span> &#123;</span><br><span class="line">      <span class="attribute">font-size</span>: <span class="number">10em</span>;</span><br><span class="line">      <span class="attribute">display</span>: inline-block;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">0.4em</span>;</span><br><span class="line">      <span class="attribute">box-sizing</span>: content-box;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">0.4em</span>;</span><br><span class="line">      <span class="attribute">border</span>: <span class="number">0.1em</span> solid red;</span><br><span class="line">      <span class="attribute">position</span>: relative;</span><br><span class="line">      <span class="attribute">border-radius</span>: <span class="number">0.35em</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-id">#magnifying-glass</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">      <span class="attribute">content</span>: <span class="string">""</span>;</span><br><span class="line">      <span class="attribute">display</span>: inline-block;</span><br><span class="line">      <span class="attribute">position</span>: absolute;</span><br><span class="line">      <span class="attribute">right</span>: -<span class="number">0.25em</span>;</span><br><span class="line">      <span class="attribute">bottom</span>: -<span class="number">0.1em</span>;</span><br><span class="line">      <span class="attribute">border-width</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">background</span>: red;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">0.35em</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">0.08em</span>;</span><br><span class="line">      <span class="attribute">transform</span>: <span class="built_in">rotate</span>(45deg);</span><br><span class="line">    &#125;</span><br><span class="line"><span class="selector-id">#facebook-icon</span> &#123;</span><br><span class="line">      <span class="attribute">background</span>: red;</span><br><span class="line">      <span class="attribute">text-indent</span>: -<span class="number">999em</span>;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">110px</span>;</span><br><span class="line">      <span class="attribute">box-sizing</span>: content-box;</span><br><span class="line">      <span class="attribute">border-radius</span>: <span class="number">5px</span>;</span><br><span class="line">      <span class="attribute">position</span>: relative;</span><br><span class="line">      <span class="attribute">overflow</span>: hidden;</span><br><span class="line">      <span class="attribute">border</span>: <span class="number">15px</span> solid red;</span><br><span class="line">      <span class="attribute">border-bottom</span>: <span class="number">0</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-id">#facebook-icon</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">      <span class="attribute">content</span>: <span class="string">"/20"</span>;</span><br><span class="line">      <span class="attribute">position</span>: absolute;</span><br><span class="line">      <span class="attribute">background</span>: red;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">40px</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">90px</span>;</span><br><span class="line">      <span class="attribute">bottom</span>: -<span class="number">30px</span>;</span><br><span class="line">      <span class="attribute">right</span>: -<span class="number">37px</span>;</span><br><span class="line">      <span class="attribute">border</span>: <span class="number">20px</span> solid <span class="number">#eee</span>;</span><br><span class="line">      <span class="attribute">border-radius</span>: <span class="number">25px</span>;</span><br><span class="line">      <span class="attribute">box-sizing</span>: content-box;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-id">#facebook-icon</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">      <span class="attribute">content</span>: <span class="string">"/20"</span>;</span><br><span class="line">      <span class="attribute">position</span>: absolute;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">55px</span>;</span><br><span class="line">      <span class="attribute">top</span>: <span class="number">50px</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">20px</span>;</span><br><span class="line">      <span class="attribute">background</span>: <span class="number">#eee</span>;</span><br><span class="line">      <span class="attribute">right</span>: <span class="number">5px</span>;</span><br><span class="line">      <span class="attribute">box-sizing</span>: content-box;</span><br><span class="line">    &#125;</span><br><span class="line"><span class="selector-id">#moon</span> &#123;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">80px</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">80px</span>;</span><br><span class="line">      <span class="attribute">border-radius</span>: <span class="number">50%</span>;</span><br><span class="line">      <span class="attribute">box-shadow</span>: <span class="number">15px</span> <span class="number">15px</span> <span class="number">0</span> <span class="number">0</span> red;</span><br><span class="line">    &#125;</span><br><span class="line">  <span class="selector-id">#flag</span> &#123;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">110px</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">56px</span>;</span><br><span class="line">      <span class="attribute">box-sizing</span>: content-box;</span><br><span class="line">      <span class="attribute">padding-top</span>: <span class="number">15px</span>;</span><br><span class="line">      <span class="attribute">position</span>: relative;</span><br><span class="line">      <span class="attribute">background</span>: red;</span><br><span class="line">      <span class="attribute">color</span>: white;</span><br><span class="line">      <span class="attribute">font-size</span>: <span class="number">11px</span>;</span><br><span class="line">      <span class="attribute">letter-spacing</span>: <span class="number">0.2em</span>;</span><br><span class="line">      <span class="attribute">text-align</span>: center;</span><br><span class="line">      <span class="attribute">text-transform</span>: uppercase;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-id">#flag</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">      <span class="attribute">content</span>: <span class="string">""</span>;</span><br><span class="line">      <span class="attribute">position</span>: absolute;</span><br><span class="line">      <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">bottom</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">border-bottom</span>: <span class="number">13px</span> solid <span class="number">#eee</span>;</span><br><span class="line">      <span class="attribute">border-left</span>: <span class="number">55px</span> solid transparent;</span><br><span class="line">      <span class="attribute">border-right</span>: <span class="number">55px</span> solid transparent;</span><br><span class="line">    &#125;</span><br><span class="line"><span class="selector-id">#cone</span> &#123;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">border-left</span>: <span class="number">70px</span> solid transparent;</span><br><span class="line">      <span class="attribute">border-right</span>: <span class="number">70px</span> solid transparent;</span><br><span class="line">      <span class="attribute">border-top</span>: <span class="number">100px</span> solid red;</span><br><span class="line">      <span class="attribute">border-radius</span>: <span class="number">50%</span>;</span><br><span class="line">    &#125;</span><br><span class="line">  <span class="selector-id">#cross</span> &#123;</span><br><span class="line">      <span class="attribute">background</span>: red;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">      <span class="attribute">position</span>: relative;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">20px</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-id">#cross</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">      <span class="attribute">background</span>: red;</span><br><span class="line">      <span class="attribute">content</span>: <span class="string">""</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">20px</span>;</span><br><span class="line">      <span class="attribute">left</span>: -<span class="number">40px</span>;</span><br><span class="line">      <span class="attribute">position</span>: absolute;</span><br><span class="line">      <span class="attribute">top</span>: <span class="number">40px</span>;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">    &#125;</span><br><span class="line">   <span class="selector-id">#base</span> &#123;</span><br><span class="line">      <span class="attribute">background</span>: red;</span><br><span class="line">      <span class="attribute">display</span>: inline-block;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">55px</span>;</span><br><span class="line">      <span class="attribute">margin-left</span>: <span class="number">20px</span>;</span><br><span class="line">      <span class="attribute">margin-top</span>: <span class="number">55px</span>;</span><br><span class="line">      <span class="attribute">position</span>: relative;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-id">#base</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">      <span class="attribute">border-bottom</span>: <span class="number">35px</span> solid red;</span><br><span class="line">      <span class="attribute">border-left</span>: <span class="number">50px</span> solid transparent;</span><br><span class="line">      <span class="attribute">border-right</span>: <span class="number">50px</span> solid transparent;</span><br><span class="line">      <span class="attribute">content</span>: <span class="string">""</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">position</span>: absolute;</span><br><span class="line">      <span class="attribute">top</span>: -<span class="number">35px</span>;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">    &#125;</span><br><span class="line"><span class="selector-id">#pointer</span> &#123;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">40px</span>;</span><br><span class="line">      <span class="attribute">position</span>: relative;</span><br><span class="line">      <span class="attribute">background</span>: red;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-id">#pointer</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">      <span class="attribute">content</span>: <span class="string">""</span>;</span><br><span class="line">      <span class="attribute">position</span>: absolute;</span><br><span class="line">      <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">bottom</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">border-left</span>: <span class="number">20px</span> solid white;</span><br><span class="line">      <span class="attribute">border-top</span>: <span class="number">20px</span> solid transparent;</span><br><span class="line">      <span class="attribute">border-bottom</span>: <span class="number">20px</span> solid transparent;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-id">#pointer</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">      <span class="attribute">content</span>: <span class="string">""</span>;</span><br><span class="line">      <span class="attribute">position</span>: absolute;</span><br><span class="line">      <span class="attribute">right</span>: -<span class="number">20px</span>;</span><br><span class="line">      <span class="attribute">bottom</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">border-left</span>: <span class="number">20px</span> solid red;</span><br><span class="line">      <span class="attribute">border-top</span>: <span class="number">20px</span> solid transparent;</span><br><span class="line">      <span class="attribute">border-bottom</span>: <span class="number">20px</span> solid transparent;</span><br><span class="line">    &#125;</span><br><span class="line">  <span class="selector-id">#lock</span> &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">8px</span>;</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">18em</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">13em</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">2em</span>;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">10em</span>;</span><br><span class="line">  <span class="attribute">box-sizing</span>: border-box;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">3.5em</span> solid red;</span><br><span class="line">  <span class="attribute">border-right-width</span>: <span class="number">7.5em</span>;</span><br><span class="line">  <span class="attribute">border-left-width</span>: <span class="number">7.5em</span>;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">6rem</span> <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#lock</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">  <span class="attribute">content</span>: <span class="string">""</span>;</span><br><span class="line">  <span class="attribute">box-sizing</span>: border-box;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">2.5em</span> solid red;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">14em</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">12em</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">margin-left</span>: -<span class="number">7em</span>;</span><br><span class="line">  <span class="attribute">top</span>: -<span class="number">12em</span>;</span><br><span class="line">  <span class="attribute">border-top-left-radius</span>: <span class="number">7em</span>;</span><br><span class="line">  <span class="attribute">border-top-right-radius</span>: <span class="number">7em</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#lock</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">  <span class="attribute">content</span>: <span class="string">""</span>;</span><br><span class="line">  <span class="attribute">box-sizing</span>: border-box;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1em</span> solid red;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">5em</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">8em</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">2.5em</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">top</span>: -<span class="number">1em</span>;</span><br><span class="line">  <span class="attribute">margin-left</span>: -<span class="number">2.5em</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


    </div>

    
    
    

      <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/css/" rel="tag"># css</a>
          </div>

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2020/01/03/018-%E7%BD%91%E9%A1%B5%E4%B8%AD%E4%BD%BF%E7%94%A8%E8%BF%9B%E5%BA%A6%E6%9D%A1/" rel="prev" title="018-网页中使用进度条">
      <i class="fa fa-chevron-left"></i> 018-网页中使用进度条
    </a></div>
      <div class="post-nav-item">
    <a href="/2020/01/05/020-JavaScript%E8%AF%AD%E8%A8%80%E7%BC%96%E7%A8%8B%E8%A7%84%E8%8C%83ES6/" rel="next" title="020-JavaScript语言编程规范ES6">
      020-JavaScript语言编程规范ES6 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  

  </div>


          </div>
          

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="liupan"
      src="/images/avatar.gif">
  <p class="site-author-name" itemprop="name">liupan</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">20</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
          
        <span class="site-state-item-count">28</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="feed-link motion-element">
    <a href="/atom.xml" rel="alternate">
      <i class="fa fa-rss"></i>RSS
    </a>
  </div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <a href="https://github.com/facetothesea" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;facetothesea" rel="noopener" target="_blank"><i class="fa fa-fw fa-github"></i>GitHub</a>
      </span>
      <span class="links-of-author-item">
        <a href="/mailto:hbxgliupan@sina.com" title="E-Mail → mailto:hbxgliupan@sina.com" rel="noopener" target="_blank"><i class="fa fa-fw fa-envelope"></i>E-Mail</a>
      </span>
  </div>



      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">liupan</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> 强力驱动 v4.0.0
  </div>
  <span class="post-meta-divider">|</span>
  <div class="theme-info">主题 – <a href="https://pisces.theme-next.org/" class="theme-link" rel="noopener" target="_blank">NexT.Pisces</a> v7.5.0
  </div>

        








        
      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>
<script src="/js/utils.js"></script><script src="/js/motion.js"></script>
<script src="/js/schemes/pisces.js"></script>
<script src="/js/next-boot.js"></script>



  




  <script src="/js/local-search.js"></script>













  

  

  

</body>
</html>
